<template>
  <div class="content">
    <ve-bar
      :data="chartData"
      :grid="grid"
      :extend="chartExtend"
    />
  </div>
</template>

<script>
export default {
  name: 'MaterialsDesc',
  props: {
    chartData: {
      type: Object,
      default() {
        return {
          columns: ['名称', '设备数量'],
          rows: [
            { '名称': 'lora网关', '设备数量': 9 },
            { '名称': '4g阀门控制器', '设备数量': 416 },
            { '名称': '水泵', '设备数量': 2 },
            { '名称': '电磁阀', '设备数量': 744 },
            { '名称': '土壤墒情', '设备数量': 0 }
          ]
        }
      }
    }
  },
  data() {
    return {
      grid: {
        top: 40,
        bottom: 80
      },
      chartExtend: {
        'xAxis.0.axisLabel.rotate': 45, // x轴文本倾斜
        series: {
          type: 'bar',
          barWidth: 20
        }
      },
      chartSettings: {
        offsetY: 140
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 314px;
}
</style>
